<template>
	<view class="pices" style="background-color: #FFFFFF;">
		<u-navbar back-text="返回" title="创建你的帖子" :background="background" title-color="#ffffff" back-icon-color="#ffffff"
		 :back-text-style="{color: '#fff'}" v-slot="shi" :border-bottom="false">
			<view class="navbar-right" slot="right">
				<text style="color: #FFFFFF;font-size: 30rpx;margin-left: 480rpx;" class="right-item" @click="created">完成</text>
			</view>
		</u-navbar>
		<scroll-view>
			<u-row>
				<u-col span="1"></u-col>
				<u-col span="10" style="margin-top: 10rpx;">
					<view class="uni-form-item uni-column">

						<input class="uni-input" adjust-position maxlength="50" placeholder-style="font-size:30rpx;" style="height: 70rpx;font-size: 40rpx;"
						 focus placeholder="加个标题哟!~" v-model:value="title" />

					</view>
					<view class="uni-textarea" style="margin-top: 10rpx;">

						<textarea placeholder="来吧,尽情发挥吧~~" auto-height maxlength="3000" style=" width: 625rpx; font-size: 25rpx;"
						 v-model:value="content" />

						</view>
				<view style="margin-top: 100rpx;">
					<image :src="item" v-for="item in imgArr" @click="preimg(item)"></image>
					<u-row>
						<u-col span="3">
							<button type="default" 
							style="width: 150rpx; height: 150rpx;text-align: center;border-color: #c8c9cc;" 
							plain @click="choseimg">
							
							<u-icon name="photo" style="margin-top: 50rpx;" color="#c8c9cc" size="40"></u-icon>
							
							</button>

						</u-col>
					</u-row>
					
				</view>
				</u-col>
				<u-col span="1"></u-col>
			</u-row>
		</scroll-view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				imgArr:[],
				title:"",
				content:""
			}
		},
		methods: {
			created(){
				if(this.content==""){
					this.$refs.uToast.show({
						title: '帖子内容不能为空',
						type: 'error'
					})
					return
				}else if(this.title==""){
					this.$refs.uToast.show({
						title: '帖子标题不能为空',
						type: 'error'
					})
					return
				}
				// console.log("标题",this.title);
				// console.log("内容",this.content);
				// console.log("图片地址",this.imgArr[0]);
				console.log(this.imgArr.length);
				if(this.imgArr.length==1){
					console.log("进到if");
				uni.uploadFile({
					url:this.baseurl+"cDiscussion/creat",
					name:"files",
					filePath:this.imgArr[0],
					formData:{
						title:this.title,
						community:this.$store.state.userInfo.community,
						subTitle:this.content.substring(0,50),
						content:this.content,
						createdBy:this.$store.state.userInfo.name,
					},
					success: (res) => {
						var j = JSON.parse(res.data);
						if(j.code==200){
							this.gocomm();
						}
					}
				})
				}
				else{
					console.log("进到else");
					uni.request({
						url:this.baseurl+"cDiscussion/creat2",
						method:"POST",
						data:{
							title:this.title,
							community:this.$store.state.userInfo.community,
							subTitle:this.content.substring(0,50),
							content:this.content,
							createdBy:this.$store.state.userInfo.name,
						},
						success: (res) => {
							var j = res.data;
							console.log(res,"else的");
							if(j.code==200){
								this.gocomm();
							}
						}
					})
				}
			},
			// 回到论坛首页
			gocomm(){
				console.log("进入方法")
				uni.switchTab ({
					url:"./comm",
				})
					

			},
			choseimg(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						//上传成功，res中有tempFilePaths,保存了临时地址
						this.imgArr=res.tempFilePaths;
						 console.log(res);
					}
				})
			},
			preimg(item){
				//预览图片方法
				uni.previewImage({
					//当前要预览的哪一张：用current来接收
					//urls：预览的图片数组地址
					current:item,
					urls:this.imgArr,
					loop:true, //循环滚动
					indicator:"number" //预览开启下标
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pices {
		height: 100%;
	}
	.slot-wrap {
			display: flex;
			
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
		}
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
</style>
